<template>
	<unicloud-db ref="udb" collection="tian-mall-products" field="name,goods_summary,goods_thumb,last_modify_date"
		:where="{category_id}" orderby="last_modify_date desc" :page-size="6"
		v-slot:default="{data, pagination, loading, hasMore}">
		<view class="sub-items">
			<template v-for="item, index in data" :key="index">
				<view class="sub-item" @click="toDetail(item._id)">
					<image :src="$thumbImg(item.goods_thumb,'70x70')" mode="widthFix" class="image"></image>
					<view class="name-text-box">
						<text class="name-text">{{item.name}}</text>
					</view>
				</view>
			</template>
		</view>

	</unicloud-db>
</template>

<script>
	export default {
		name: "wjf-goods-list",

		props: {
			category_id: {
				type: String,
				default: ''
			}
		},
		computed: {
			goods() {
				return this.value
			}
		},
		data() {
			return {};
		},
		methods: {
			toDetail(ID) {
				uni.navigateTo({
					url: '/pages/product/detail?id=' + ID,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sub-items {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-right: 30rpx;
		padding-bottom: 20rpx;

		.sub-item {
			width: calc(33.33% - 20rpx);
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			min-height: 180rpx;

			.image {
				width: 133rpx;
				height: auto;
				display: block;
				border-radius: 6rpx;
				object-fit: cover;
			}

			.name-text-box {
				display: flex;
			}

			.name-text {
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				color: #555;
				font-size: 24rpx;
			}
		}
	}
</style>